<template slot-scope="scope">
    <div id="idtable1" class="app-container" style="width: 99%; overflow: hidden; background: #ffffff; display: block; margin-left: 20px">
        <div style="height: 8px"></div>
        <!-- <el-input v-model="searchlx" placeholder="请输入项目名称" class="input_search"></el-input>&nbsp;&nbsp;
                <el-button type="primary" @click="topage()" class="bthSearch">搜索</el-button> -->
        <el-button type="primary" @click="newdiaglog('unit_sg_input', '新增监理╱施工单位')" class="bthSearch">新增</el-button>
        <el-button type="primary" @click="dels()" class="bthSearch">批量删除</el-button>
        <!-- <el-button @click="showdialogVisible1()" class="bthNormal">单位分配人员</el-button> -->
        <el-button id="idcloseclick" @click="closeDialog()" style="display: none"></el-button>
        <div style="height: 8px"></div>

        <div class="app-container" id="idAppContainer">
            <el-table
                :data="zbinfo"
                border
                :row-style="{ height: '30px' }"
                :header-cell-style="{ background: '#005ab5', color: 'black' }"
                :row-class-name="rowClassName"
                @selection-change="handleSectionChange"
                style="font-size: 15px; font-family: microsoft yahei; color: black"
            >
                <el-table-column type="selection" width="80px" align="center" header-align="center"></el-table-column>
                <el-table-column label="序号" prop="xh" align="center" header-align="center"></el-table-column>
                <el-table-column label="单位名称" prop="unitName" align="left" header-align="left"></el-table-column>
                <el-table-column label="单位编号" prop="unitNum" align="left" header-align="left"></el-table-column>
                <el-table-column label="单位状态" prop="status" align="left" header-align="left">
                    <template slot-scope="scope">
                        {{ scope.row.status == 1 ? '启用' : scope.row.status == 0 ? '禁用' : '' }}
                    </template>
                </el-table-column>
                <el-table-column label="单位类型" prop="unitType" align="left" header-align="left">
                    <template slot-scope="scope">
                        {{ scope.row.unitType == 1 ? '施工单位' : '监理单位' }}
                    </template>
                </el-table-column>
                <el-table-column label="负责人" prop="unitPrincipal" align="left" header-align="left"></el-table-column>
                <el-table-column label="联系电话" prop="phone" align="left" header-align="left"></el-table-column>
                <el-table-column
                    label="操作"
                    prop="cz"
                    align="left"
                    header-align="left"
                    style="vertical-align: bottom; text-align: left; height: 10%"
                >
                    <template slot-scope="scope">
                        <!-- <router-link
                                    :to="{ path: '/supervision_clock/new_today_clocking', query: { id: scope.row.id } }"
                                    class="fontNormal"
                                >
                                    修改
                                </router-link> -->
                        <span
                            style="cursor: pointer"
                            @click="newdiaglog('unit_sg_input', '新增监理╱施工单位', scope.row.id)"
                            class="fontNormal"
                        >
                            修改
                        </span>
                        <span class="fontNormal" @click="deleteone(scope.row.id)" style="cursor: pointer"> 删除 </span>
                        <!-- <span class="fontNormal" @click="showdialogVisible1(scope.row.id)" style="cursor: pointer"> 分配人员 </span> -->
                        <!-- <span class="fontNormal" @click="toYS(scope.row.id)"> 转验收 </span> -->
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog :visible.sync="dialogVisible1" width="45%" id="wyff">
                <!-- title -->
                <div slot="title" style="text-align: center">
                    <span>分发人员</span>
                </div>
                <!-- 穿梭框 -->
                <el-transfer
                    v-model="transferValue"
                    :data="transferData"
                    :props="{ key: 'id', label: 'userName' }"
                    filterable
                    :titles="['全部人员', '已选择人员']"
                    :button-texts="['移除', '选取']"
                />
                <el-button type="primary" class="distributeBtn" @click="distribute()">确认分配</el-button>
            </el-dialog>
        </div>
        <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center"
            background
            layout="total, prev, pager, next, jumper"
            @current-change="getList"
        />
        <el-dialog id="id_eldiaglog" :title="eldiaglog_title" :visible.sync="dialogVisible" width="80%" height="100%">
            <div id="iddivframe">
                <iframe id="idframe" src="" frameborder="0" width="100%" height="700px"></iframe>
            </div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script>
import $ from 'jquery';
import information from '@/api/sys/sgunit';
export default {
    data() {
        return {
            dialogVisible1: false,
            eldiaglog_title: '',
            dialogVisible: false, //弹出框
            zbinfo: [],
            page: 1,
            limit: 10,
            total: 0,
            courseQuery: [],
            tableChecked: [],
            tabledatas: [],
            searchlx: '',
            transferValue: [],
            transferData: [],
            unitid: ''
        };
    },
    created() {
        setTimeout(function () {
            setPaginationFontSize();
        }, 100);
        this.getList();
    },

    methods: {
        
        handleSelectionChange(val) {
            this.tableChecked = val;
        },
        showdialogVisible1(id) {
            // if (this.tableChecked.length == 0) return this.$message.error('请选择要操作的项目');
            // 获取外业分发数据
            this.getDistributeData(id);
            this.dialogVisible1 = true;
        },
        async getDistributeData(id) {
            this.transferValue = [];
            const { data: res } = await this.$http.post('/user/findall');
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            this.unitid = id;
            information.getpeople(id).then((rep) => {
                for (var a = 0; a < rep.data.length; a++) {
                    this.transferValue.push(rep.data[a].id);
                }
                console.log(this.transferValue);
            });
            this.transferData = res.data;
        },
        distribute() {
            if (this.transferValue.length === 0) return this.$message.error('请选择分配的人员');
            let form = new FormData();
            form.append('unitId', this.unitid);
            form.append('userIds', this.transferValue);
            information.mission(form).then((rep) => {
                this.$message.success('配置成功');
            });
            this.transferValue = [];
            this.dialogVisible1 = false;
        },
        closeDialog() {
            this.dialogVisible = false;
            this.getList();
        },
        newdiaglog(stype, stitle, id) {
            this.dialogVisible = true;
            if ($('#idframe').attr('src') == undefined) {
                setTimeout(function () {
                    dialogFrameSrc(stype, id);
                }, 500);
            } else {
                dialogFrameSrc(stype, id);
            }
            this.eldiaglog_title = stitle;
        },
        rowClassName({ row, rowIndex }) {
            //row.xh = rowIndex + 1;
            row.xh = (this.page - 1) * 10 + 1 + rowIndex;
        },
        newdoc() {
            window.open('view?path=/#/unit_input');
        },
        //跳转页面
        topage() {
            const { href } = this.$router.resolve({ path: '/unit_input' });
            window.open(href, '_blank');
        },
        //获取信息
        getList(page = 1) {
            this.page = page;
            information.sgpage(this.page, this.limit).then((response) => {
                this.zbinfo = response.data.rows;
                // console.log(this.zbinfo,1263816236)
                this.total = response.data.total;
            });
        },
        // 删除单条记录
        deleteone(id) {
            this.$confirm('此操作将删除当前的项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                information.dels(id).then((rep) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                });
            });
        },
        // 批量删除
        dels() {
            if (this.tableChecked.length == 0) {
                alert('请选择删除的项目');
            } else {
                var _this = this;
                _this
                    .$confirm('此操作将删除记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        //点击确定，执行then方法
                        //调用删除的方法
                        for (let i = 0; i < this.tableChecked.length; i++) {
                            information.dels(this.tableChecked[i].id);
                        }
                        location.reload()
                        //点击取消，执行catch方法
                    });
                     
            }
        },
        handleSectionChange(val) {
            this.tableChecked = val;
        }
    }
};
function setPaginationFontSize() {
    if ($('.el-pagination__total').css('font-size') == '13px') {
        $('.el-pagination__total').css('font-size', '15px');
        $('.el-pagination__jump').css('font-size', '15px');
    } else {
        setTimeout(function () {
            setPaginationFontSize();
        }, 100);
    }
}
function dialogFrameSrc(stype, id) {
    switch (stype) {
        case 'unit_sg_input':
            console.log(
                '<iframe id="idframe" src="/?r=' + Math.random() + '/#/' + stype + '" frameborder="0" width="100%" height="600px"></iframe>'
            );
            $('#iddivframe').html(
                '<iframe id="idframe" src="/?r=' +
                    Math.random() +
                    '/#/' +
                    stype +
                    '" data-id="' +
                    id +
                    '" frameborder="0" width="100%" height="600px"></iframe>'
            );
            break;
    }
    // if (stype == 'sxt') {
    //     //$('#iddivframe').html('<iframe id="idframe" src="/#/table_sxt" frameborder="0" width="100%" height="600px"></iframe>');
    //     $('#iddivframe').html('<iframe id="idframe" src="view?path=/#/table_sxt" frameborder="0" width="100%" height="600px"></iframe>');
    // } else {
    //     $('#iddivframe').html('<iframe id="idframe" src="http://www.baidu.com" frameborder="0" width="100%" height="600px"></iframe>');
    // }
}
</script>

<style lang="less">
.el-table__header {
    width: 100% !important;
}
.el-table__body {
    width: 100% !important;
}
.el-table th {
    background-color: #e2e2e2 !important;
}
.el-table .cell {
    text-overflow: clip;
}
.input_search {
    width: 150px;
}
.divtitle {
    font-family: 微软雅黑;
    font-size: 25px;
    color: #356cb3;
}
.btnSearchAdv {
    border-color: #356cb3;
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthSearch {
    background-color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthNormal {
    border-color: #848484;
    font-size: 15px;
    font-family: 微软雅黑;
}
.el-tabs--border-card {
    border: 1px solid #ffffff;
}
.lableFont {
    font-size: 15px;
    font-family: 微软雅黑;
    color: black;
}

.tabPaneLs .el-icon-lx-home {
    background-image: url('../../../../assets/img/el-tab-pane-dkjl.png') !important;
    background-size: 100% 99%;
}
.tabPaneLs .el-icon-lx-home::before {
    visibility: hidden;
}

.tabPaneTj .el-icon-lx-home {
    background-image: url('../../../../assets/img/el-tab-pane-dktj.png') !important;
    background-size: 100% 99%;
}
.tabPaneTj .el-icon-lx-home::before {
    visibility: hidden;
}
.fontNormal {
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.pageNormal {
    padding: 30px 0;
    text-align: center;
    font-size: 15px;
    font-family: 微软雅黑;
    color: black;
}

.el-pagination__total {
    color: #000000;
    font-family: 微软雅黑;
}
.el-pagination__jump {
    color: #000000;
    font-family: 微软雅黑;
}
.distributeBtn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
/* 外业分发任务对话框样式 */
/deep/ #wyff .el-transfer__buttons button {
    display: block;
    margin: 0;
    margin: 10px 0;
}
/deep/ #wyff .el-transfer__buttons span {
    margin-left: 0;
}
/deep/ #wyff .el-transfer-panel {
    width: 340px;
}
/deep/ #wyff .el-dialog__body {
    padding: 10px 20px;
    /* text-align: center; */
}
/deep/ #wyff .el-dialog {
    height: 420px;
}
.el-transfer-panel {
    width: 295px;
}
.distributeBtn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

</style>